<script setup>
import { onShow } from '@dcloudio/uni-app';
import { getCurrentInstance, ref, reactive, computed } from 'vue';

const top_height = ref(0); //顶部安全区域
const top_container_height = ref(0); //顶部容器高度
const footer_container_bottomPosition = ref('120rpx');
const normal_type = ref('咖啡'); //默认选中tap类型
const selected_tapid = ref(0); //当前选中的标签id

//轮播图
const swiper_list = reactive([
	{
		id: 0,
		image: 'https://bpic.588ku.com/back_origin_min_pic/22/08/19/728b7f8bb0f8b64d796c4f563c00ccc1.jpg'
	},
	{
		id: 1,
		image: 'https://bpic.588ku.com/back_origin_min_pic/22/08/19/728b7f8bb0f8b64d796c4f563c00ccc1.jpg'
	},
	{
		id: 2,
		image: 'https://bpic.588ku.com/back_origin_min_pic/22/08/19/728b7f8bb0f8b64d796c4f563c00ccc1.jpg'
	}
]);

//商品列表信息
const tabList = ref([
	{
		tap_id: 0,
		title: '咖啡',
		subtitle: 'COFFEE',
		children: [
			{ id: 1, goodsid: '0-1', title: '水煮肉片', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 2, goodsid: '0-2', title: '酸菜鱼', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99, remain_num: 1, selected_num: 0 },
			{ id: 3, goodsid: '0-3', title: '牛232排', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 4, goodsid: '0-4', title: '牛ew柳', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 5, goodsid: '0-5', title: '牛232排', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 6, goodsid: '0-6', title: 'sssd', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 7, goodsid: '0-7', title: 'wewe', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 8, goodsid: '0-8', title: '牛dsd排', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 9, goodsid: '0-9', title: '牛ehwj排', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 }
		]
	},
	{
		tap_id: 1,
		title: '饮品',
		subtitle: 'DRINK',
		children: [
			{ id: 1, goodsid: '1-1', title: '水煮肉片', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 2, goodsid: '1-2', title: '酸菜鱼', subtitle: '阿拉比卡咖啡', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 }
		]
	},
	{
		tap_id: 2,
		title: '小食',
		subtitle: 'SNACKS',
		children: [
			{ id: 1, goodsid: '2-1', title: '水煮肉片', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 2, goodsid: '2-2', title: '酸菜鱼', subtitle: '阿拉比卡咖啡', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 }
		]
	},
	{
		tap_id: 3,
		title: '简餐',
		subtitle: 'LIGHT MEAL',
		children: [
			{ id: 1, goodsid: '3-1', title: '水煮肉片', subtitle: '阿拉比卡咖啡豆深烘', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 },
			{ id: 2, goodsid: '3-2', title: '酸菜鱼', subtitle: '阿拉比卡咖啡', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88, remain_num: 1, selected_num: 0 }
		]
	}
]);

//选中修改样式
const selectItem = (index, title) => {
	selected_tapid.value = index;
	normal_type.value = title;
};

//底部订单状态条
const orderList = ref([])

// 查找 tabList 中的某个商品
const findTabItemByGoodsId = (goodsid) => {
	for (const tab of tabList.value) {
		const found = tab.children.find(child => child.goodsid === goodsid);
		if (found) return found;
	}
	return null;
};

// 同步更新 tabList 中的商品数量
const syncTabListItemCount = (goodsid, newCount) => {
	const exist_in_tab = findTabItemByGoodsId(goodsid);
	if (exist_in_tab) {
		exist_in_tab.selected_num = newCount;
	}
};

// 增加商品数量
const addToCart = (item) => {
	item.selected_num++;
	syncTabListItemCount(item.goodsid, item.selected_num);

	const exist_in_order = orderList.value.find(orderItem => orderItem.goodsid === item.goodsid);
	if (exist_in_order) {
		//若存在，则在orderlist中更新数量
		exist_in_order.selected_num = item.selected_num;
	} else {
		//否则orderlist中插入新数据
		orderList.value.push({
			goodsid: item.goodsid,
			title: item.title,
			price: item.price,
			selected_num: item.selected_num,
			cover: item.cover
		});
	}
};

// 减少商品数量
const subToCart = (item) => {
	const exist_in_order = orderList.value.find(orderItem => orderItem.goodsid === item.goodsid);
	if (!exist_in_order) return;

	if (exist_in_order.selected_num > 1) {
		//数量大于1，则减，orderlist和tablist同步变化
		item.selected_num--;
		exist_in_order.selected_num = item.selected_num;
		syncTabListItemCount(item.goodsid, item.selected_num);
	} else {
		//数量为1，则从orderlist中删除，并重置tablist的selected_num
		item.selected_num = 0;
		orderList.value.splice(orderList.value.indexOf(exist_in_order), 1);
		syncTabListItemCount(item.goodsid, 0);
	}
};

// 购物车内增加商品
const addHasSelectedGoods = (item) => {
	item.selected_num++;
	syncTabListItemCount(item.goodsid, item.selected_num);
	const exist_in_order = orderList.value.find(orderItem => orderItem.goodsid === item.goodsid);
	if (exist_in_order) {
		exist_in_order.selected_num = item.selected_num;
	}
};

// 购物车内减少商品
const subHasSelectedGoods = (item) => {
	if (item.selected_num > 1) {
		item.selected_num--;
		syncTabListItemCount(item.goodsid, item.selected_num);
		const exist_in_order = orderList.value.find(orderItem => orderItem.goodsid === item.goodsid);
		if (exist_in_order) {
			exist_in_order.selected_num = item.selected_num;
		}
	} else {
		orderList.value.splice(orderList.value.indexOf(item), 1);
		syncTabListItemCount(item.goodsid, 0);
	}
};

// 返回订单数量
const order_num = computed(() => {
	return orderList.value.reduce((sum, item) => sum + item.selected_num, 0);
});

// 返回订单总价
const total_price = computed(() => {
	return orderList.value
		.reduce((sum, item) => sum + item.price * item.selected_num, 0)
		.toFixed(2);
});

//展示弹窗

const is_popupShow = ref(false);

const showPopup = () => {
	is_popupShow.value = !is_popupShow.value;
};

const openPopup = () => {
	is_popupShow.value = true;
}

const closePopup = () => {
	is_popupShow.value = false;
}

//去结算
const goBuy = () => {
	uni.navigateTo({
		url: `/pages/food/confirmOrder?orderList=${JSON.stringify(orderList.value)}`,
	})
};

onShow(() => {
	const instance = getCurrentInstance();
	if (instance?.ctx?.$scope?.getTabBar?.()) {
		instance.ctx.$scope.getTabBar().setData({
			selected: 1
		}); // 0 替换为当前页索引
	}

	let systemInfo = uni.getSystemInfoSync();
	top_height.value = systemInfo.statusBarHeight;
	uni.createSelectorQuery()
		.select('.top-container')
		.boundingClientRect((data) => {
			top_container_height.value = data.height;
		})
		.exec();


	// 判断操作系统
	if (systemInfo.platform === 'android') {
		footer_container_bottomPosition.value = '120rpx'
	} else if (systemInfo.platform === 'ios') {
		footer_container_bottomPosition.value = '100px'
	} else {
		footer_container_bottomPosition.value = '120rpx'
	}

});
</script>

<template>
	<scroll-view scroll-y="true" class="food-container">
		<view class="top-container">
			<view class="top" :style="`margin-top: ${top_height}px`">
				<view class="image-wrapper">
					<image class="image" src="/static/images/top_img.png" mode="aspectFit" />
				</view>
			</view>
			<up-swiper class="swiper-container" :list="swiper_list" keyName="image" indicator indicatorMode="dot" circular
				:autoplay="true" :radius="16" height="200px"></up-swiper>
			<view class="locate-container">
				<view class="image-wrapper">
					<image class="image" src="../../static/images/logo.png" mode="aspectFill" lazy-load="false"></image>
				</view>
				<view class="address">
					<up-icon name="map" class="icon" color="#acacac"></up-icon>
					<span>长兴县泗安镇东道口村太湖梅花博览园内</span>
				</view>
			</view>
		</view>
		<view class="bottom-container" :style="`--height: ${top_container_height + 50}px`">
			<scroll-view scroll-y="true" class="left">
				<view :class="[selected_tapid === index ? 'active-item' : 'aside']" v-for="(item, index) in tabList"
					:key="item.tap_id" @click="selectItem(item.tap_id, item.title)">
					<view class="title">{{ item.title }}</view>
					<view class="subtitle">{{ item.subtitle }}</view>
					<view class="line"></view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right">
				<view class="type-title">{{ normal_type }}</view>
				<template v-for="item in tabList[selected_tapid].children" :key="item.id">
					<view class="item-container">
						<view class="left-box">
							<image class="image" :src="item.cover" mode="aspectFill" lazy-load="false"></image>
							<view class="remain">还剩 {{ item.remain_num }} 份</view>
						</view>
						<view class="right-box">
							<view class="top-box">
								<view class="title">{{ item.title }}</view>
								<view class="subtitle">{{ item.subtitle }}</view>
							</view>
							<view class="bottom-box">
								<view class="price-box">
									<view class="symbol">￥</view>
									<view class="price">{{ item.price }}</view>
								</view>
								<view class="select-box">
									<view v-if="item.selected_num > 0" class="sub" @click="subToCart(item)">-</view>
									<view v-if="item.selected_num > 0" style="margin: 0 10px;font-size: 14px;">{{
										item.selected_num }}
									</view>
									<view class="add" @click="addToCart(item)">+</view>
								</view>
							</view>
						</view>
					</view>
				</template>

				<!-- 添加的空盒子 -->
				<view style="height: 200px;"></view>
			</scroll-view>
		</view>
	</scroll-view>
	<view class="footer-container" v-if="orderList.length > 0" :style="{ '--bottom': footer_container_bottomPosition }">
		<view class="footer-box">
			<view class="image-box" @click="showPopup()">
				<image class="image" src="../../static/images/shop.png" mode="aspectFill" lazy-load="false" binderror=""
					bindload="">
				</image>
				<view class="dot">{{ order_num }}</view>
			</view>
			<view class="goBuy-box">
				<view class="price-box">
					<view class="symbol">￥</view>
					<view class="total-price">{{ total_price }}</view>
				</view>
				<view class="button" @click="goBuy()">去结算</view>
			</view>
		</view>
	</view>

	<!-- 弹窗 -->

	<up-popup z-index="10" class="popup-container" bgColor="#faf9f8" :round="16" :show="is_popupShow" mode="bottom"
		@close="closePopup" @open="openPopup" safeAreaInsetBottom="true">
		<view class="title">已选餐品</view>
		<scroll-view scroll-y="true" class="popup-box">

			<view class="popup-content" v-for="item in orderList" :key="item.id">
				<view class="left-box">
					<image class="image" :src="item.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
						binderror="" bindload="">
					</image>
				</view>
				<view class="right-box">
					<view class="top-box">
						<view class="title">{{ item.title }}</view>
					</view>
					<view class="bottom-box">
						<view class="price-box">
							<view class="symbol">￥</view>
							<view class="price">{{ item.price }}</view>
						</view>
						<view class="select-box">
							<view v-if="item.selected_num > 0" class="sub" @click="subHasSelectedGoods(item)">-</view>
							<view v-if="item.selected_num > 0" style="margin: 0 10px;font-size: 14px;">{{
								item.selected_num }}
							</view>
							<view class="add" @click="addHasSelectedGoods(item)">+</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 200px;"></view>
		</scroll-view>
	</up-popup>
</template>

<style lang="scss" scoped>
.food-container {
	position: relative;
	height: 100vh;
	overflow-y: scroll;

	.top-container {
		margin: 20rpx;

		.top {
			display: flex;
			width: 100%;
			justify-content: center;

			.image-wrapper {
				width: 160rpx;
				height: calc(160rpx * 4 / 13);
				position: relative;

				.image {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
		}

		.swiper-container {
			display: flex;
			justify-content: center;
			width: 95%;
			margin: 20rpx auto;
		}

		.locate-container {
			width: 100%;
			padding: 20rpx 40rpx;

			.image-wrapper {
				width: 240rpx;
				aspect-ratio: 227 / 62;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}

			.address {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 20rpx;
				}

				span {
					color: #acacac;
					font-size: 28rpx;
				}
			}
		}
	}

	.bottom-container {
		position: sticky;
		top: 0;
		display: flex;
		width: 100%;
		height: 100vh;

		.left {
			width: 300rpx;
			background-color: #f1f1f1;
			height: 100%;
			border-radius: 0 32rpx 0 0;

			.aside {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 20rpx 0 20rpx;


				.title {
					color: #969696;
					font-size: 28rpx;
					font-weight: 600;
				}

				.subtitle {
					color: #969696;
					font-size: 20rpx;
					padding-bottom: 40rpx;
				}

				.line {
					width: 80%;
					border-bottom: 1px solid #acacac;
				}
			}
		}

		.right {
			height: 100%;
			padding: 20rpx;

			.type-title {
				font-size: 28rpx;
				font-weight: 600;
			}

			.item-container {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;

				.left-box {
					position: relative;
					display: flex;
					flex-direction: column;
					width: 180rpx;
					aspect-ratio: 1;


					.image {
						width: 100%;
						height: 100%;
						object-fit: contain;
						border-radius: 16rpx;
					}

					.remain {
						position: absolute;
						bottom: 0;
						left: 0;
						color: #c9c9c9;
						background-color: #5c5c5c;
						width: 100%;
						text-align: center;
						font-size: 24rpx;
						border-radius: 0 0 16rpx 16rpx;
						padding: 4rpx 0;
					}

				}

				.right-box {
					width: calc(100% - 180rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 0 10rpx;

					.top-box {
						.title {
							font-size: 32rpx;
							font-weight: 600;
						}

						.subtitle {
							color: #969696;
							font-size: 24rpx;
						}
					}

					.bottom-box {
						display: flex;
						justify-content: space-between;
						align-items: end;

						.price-box {
							display: flex;
							align-items: baseline;

							.symbol {
								font-size: 28rpx;
							}

							.price {
								font-size: 32rpx;
								font-weight: 600;
							}

						}

						.select-box {
							display: flex;
							align-items: center;


							.add,
							.sub {
								width: 30rpx;
								height: 30rpx;
								text-align: center;
								line-height: 30rpx;
								background-color: #be805a;
								border-radius: 50%;
							}
						}
					}
				}
			}
		}

	}

}

.footer-container {
	display: flex;
	justify-content: center;
	z-index: 100;
	position: fixed;
	bottom: var(--bottom);
	left: 0;
	width: 100%;
	z-index: 100;

	.footer-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		border-radius: 64rpx;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 5rpx #888888;

		.image-box {
			position: relative;
			width: 60rpx;
			height: 60rpx;
			padding: 20rpx;


			.image {
				width: 100%;
				height: 100%;
			}

			.dot {
				position: absolute;
				bottom: 20rpx;
				right: 10rpx;
				width: 30rpx;
				height: 30rpx;
				color: white;
				font-size: 24rpx;
				text-align: center;
				background-color: #814e30;
				border-radius: 50%;
			}
		}

		.goBuy-box {
			display: flex;
			padding: 20rpx;
			align-items: center;

			.price-box {
				display: flex;
				align-items: baseline;
				margin: 0 10rpx;

				.symbol {
					font-weight: 600;
					font-size: 28rpx;
				}

				.total-price {
					font-size: 40rpx;
					font-weight: 600;
				}

			}

			.button {
				font-size: 28rpx;
				background-color: #c07f58;
				padding: 10rpx 30rpx;
				margin: 10rpx 5rpx;
				border-radius: 32rpx;
				font-weight: 600;
			}

		}
	}
}

.popup-container {

	.title {
		font-weight: 600;
		padding: 40rpx;
	}

	.popup-box {
		min-height: 400rpx;
		max-height: 800rpx;
		overflow-y: scroll;

		.popup-content {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			margin-bottom: 40rpx;

			.left-box {
				width: 160rpx;
				height: 160rpx;

				.image {
					width: 100%;
					height: 100%;
					border-radius: 8px;
					object-fit: contain;
				}
			}

			.right-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between !important;
				width: calc(100% - 160rpx);
				padding: 0 20rpx;

				.top-box {
					.title {
						font-size: 32rpx;
						padding: 0;
					}
				}

				.bottom-box {
					display: flex;
					justify-content: space-between;

					.price-box {
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.symbol {
							font-size: 28rpx;
						}

						.price {
							font-size: 36rpx;
							font-weight: 600;
						}
					}

					.select-box {
						display: flex;
						align-items: center;


						.add,
						.sub {
							width: 30rpx;
							height: 30rpx;
							text-align: center;
							line-height: 30rpx;
							background-color: #be805a;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
}

.active-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 20rpx 0 20rpx;

	background-color: #fff;

	.title {
		font-size: 28rpx;
		color: #979797 !important;
		font-weight: 600 !important;
	}

	.subtitle {
		color: #969696;
		font-size: 20rpx;
		padding-bottom: 40rpx;
	}

	.line {
		width: 80%;
		border-bottom: 1px solid #acacac;
	}
}
</style>
